import React, { memo } from 'react';

// 使用 memo 优化渲染性能
const TodoFilter = memo(({ filter, setFilter }) => {
  return (
    <div className="todo-filter">
      <button 
        className={`filter-btn ${filter === 'all' ? 'active' : ''}`}
        onClick={() => setFilter('all')}
      >
        全部
      </button>
      <button 
        className={`filter-btn ${filter === 'active' ? 'active' : ''}`}
        onClick={() => setFilter('active')}
      >
        未完成
      </button>
      <button 
        className={`filter-btn ${filter === 'completed' ? 'active' : ''}`}
        onClick={() => setFilter('completed')}
      >
        已完成
      </button>
    </div>
  );
});

export default TodoFilter; 